.bg {
  z-index: 10;
  min-height: 100vh;
  background-color: #F5F5F5;

  .service-evaluation {
    z-index: 100;
    padding: 24px;
    background-color: #fff;
    margin-bottom: 20px;

    .evaluation-text {
      height: 92px;
      width: 100%;
      display: flex;
      align-items: center;
      font-size: 30px;
      font-weight: 500;
      color: #333333;
    }

    .evaluation-item {
      height: 92px;
      width: 100%;
      font-size: 30px;
      display: flex;
      align-items: center;
      color: #666666;

      .evaluation-stars {
        margin-left: 16px;
      }
    }
  }

  .evaluation-goods {
    background-color: #F5F5F5;
    z-index: 100;
    width: 100%;
    padding-bottom: 134px;

    .evaluation-goods-item {
      box-sizing: border-box;
      width: 100%;
      background-color: #fff;
      margin-bottom: 20px;

      .good-info {
        box-sizing: border-box;
        width: 100%;
        // height: 176px;
        padding: 24px;
        display: flex;

        .good-img {
          width: 128px;
          height: 128px;
          margin-right: 24px;

          .img {
            width: 128px;
            height: 128px;
          }
        }

        .desc {
          box-sizing: border-box;
          flex: 1;

          .goods-name {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            word-break: break-all;
            /* 追加这一行代码 */
            font-size: 26px;
          }

          .tags {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            color: #333333;
            background: #F5F5F5;
            border-radius: 10px;
            margin: 10px;
            padding: 5px;
          }
        }
      }

      .goods-grade {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 92px;
        padding: 24px;

        .left,
        .right {
          display: flex;
          align-items: center;
          height: 92px;
        }

        .title {
          margin-right: 25px;
        }

        .btn {
          width: 184px;
          height: 64px;
          line-height: 63px;
          border: 1px solid #E5E5E5;
          color: #999999;
          font-size: 28px;
          text-align: center;
          border-radius: 10px;

          &:hover {
            opacity: .7;
          }

          &.active {
            border: 1px solid #12B3FF;
            color: #12B3FF;
          }
        }
      }

      .goods-textarea {
        box-sizing: border-box;
        padding: 24px;

        .area {
          background-color: #F5F5F5;
          color: #333;
          border: 0;
        }
      }

      .goods-picture{
        box-sizing: border-box;
        padding: 24px;
        padding-top: 0;
        .goods-picture-AtImagePicker{
          margin-top: 10px;
        }

        .at-image-picker__flex-box {
          overflow-x: scroll;
        }

        .at-image-picker__flex-item{
          flex: none;
          margin-left: 0;
          margin-right: 40px;
          width: 160px;
          flex-shrink: 0;
        }
      }
    }
  }

  .submit-tip-dialog {
    z-index: 200;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;

    .mask {
      z-index: 201;
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: rgba($color: #000000, $alpha: 0.77);
    }

    .content {
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;

      &-wrap {
        z-index: 202;
        background: #fff;
        width: 72%;
        border-radius: 20px;

        &-h {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 36rpx 24rpx 0rpx 24rpx;
          font-size: 40px;
        }

        &-tips {
          padding: 24rpx 24rpx 36rpx 24rpx;
          color: #333;
          font-size: 28px;
          text-align: center;
          line-height: 1.6;
        }

        &-action {
          display: flex;
          flex-direction: column;
          justify-content: center;
          border-top: 1px solid #E5E5E5;
          &-btn {
            width: 100%;
            height: 100px;
            line-height: 99px;
            text-align: center;
            color:  #12b3ff;
            font-size: 30px;
            border-radius: 24px;

            &:active {
              opacity: 0.4;
            }
          }
        }
      }
    }
  }

  .redpack-dialog {
    z-index: 200;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;

    .mask {
      z-index: 201;
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: rgba($color: #000000, $alpha: 0.77);
    }

    .content {
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;

      &-wrap {
        z-index: 202;
        background: #fff;
        width: 540px;
        border-radius: 20px;

        &-h {
          display: flex;
          justify-content: center;
          height: 299px;
          width: 540px;
          font-size: 40px;
          background: url('https://static3.jekunauto.com/img/others/bg-redpack.png');
          background-size: contain;
          .text {
            margin-top: 48px;
            font-size: 40px;
            color: #fff;
          }
        }

        &-tips {
          display: flex;
          flex-direction: column;
          padding: 24rpx 24rpx 36rpx 24rpx;
          color: #333;
          font-size: 28px;
          text-align: center;
          line-height: 1.6;
          .amount {
            font-size: 40px;
            color: #FF3B30;
          }
          .date {
            font-size: 24px;
            color: #999999;
          }
        }

        &-action {
          display: flex;
          flex-direction: column;
          justify-content: center;
          border-top: 1px solid #E5E5E5;
          &-btn {
            width: 100%;
            height: 100px;
            line-height: 99px;
            text-align: center;
            color:  #12b3ff;
            font-size: 30px;
            border-radius: 24px;

            &:active {
              opacity: 0.4;
            }
          }
        }
      }
    }
  }

  .submit-wrap {
    z-index: 101;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    height: 134px;
    bottom: 0;
    left: 0;
    padding: 20px 24px;
    background-color: #fff;

    .submit {
      width: 100%;
      height: 94px;
      line-height: 94px;
      background-color: #12B3FF;
      border-radius: 10px;
      color: #fff;
      text-align: center;

      &:hover {
        opacity: 0.8;
      }
    }
  }
}
